<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="resources/compositor-touch-hit-rects.css">
<style>
.composited {
  will-change: transform;
}

.box {
  width: 50px;
  height: 50px;
  background-color: white;
}

#middle {
  position: absolute;
  z-index: 1;
  top: 50px;
  left: 20px;
}

#behind {
  position: absolute;
  z-index: 1;
  top: 90px;
  left: 60px;
}

#top {
  position: absolute;
  z-index: 1;
  top: 130px;
  left: 100px;
}

#tests {
  height: 200px;
}

</style>
</head>
<body>
<p id="description">
This test verifies the hit test regions given to the compositor for composited layer squashing.
</p>

<div id="tests">
  <div id="behind" class="composited box testcase"></div>
  <div id="middle" class="box testcase"></div>
  <div id="top" class="box testcase"></div>
</div>

<div id="console"></div>
<script src="resources/compositor-touch-hit-rects.js"></script>
</body>
